<template>
  <div class="time-period no-user-select">{{ period }}</div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  name: 'TimePeriod',
  props: {
    startTime: String,
    date: String,
    moment: String,
  },
  computed: {
    period() {
      // 时效日期时间
      let end = dayjs(this.date).hour(0).add(+this.startTime + +this.moment, 'hour').format('YYYY-MM-DD HH');
      // 起报日期时间
      let now = dayjs(end).subtract(12, 'hour').format('YYYY-MM-DD HH');
      return `${now}时 至 ${end}时`;
    },
  }
}
</script>

<style lang="scss">
.time-period {
  display: inline-block;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-family: "SourceHanSansCN";
  color: #3590fa;
  text-shadow: 0.5px 0.866px 0px rgba(30, 61, 105, 0.42);
  z-index: 100;
}
</style>